<template>
  <z-box class="infect-analysis" style="height: 800px;">
    <z-title name="可播放的关系图 graph"></z-title>
    <div class="z-querybar" style="margin: 10px 0">
      <el-input v-model="dataForm.search" placeholder="请输入IMSI" style="width: 250px;"></el-input>
      <el-date-picker
        v-model="dataForm.daterange"
        style="width: 320px"
        :unlink-panels="true"
        type="daterange"
        :clearable="false"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期">
      </el-date-picker>
      <el-button type="primary" class="btn-search" @click="getDataList" icon="el-icon-search">开始分析</el-button>
    </div>
    <div class="z-pagecontent" style="background: #16283D; height: calc(100% - 90px); position: relative;">
      <z-chart :option="chartOption" ref="chart" style="width: 100%; height: calc(100% - 70px)"></z-chart>
      <div class="player">
        <div class="play-btn" @click="playBtnClick()">
          <i v-if="playStatus === '1'" class="iconfont icon-zanting play-btn-icon"></i>
          <i v-else class="iconfont icon-qiyong play-btn-icon"></i>
        </div>
        <div class="progress">
          <div class="progress-line">
            <div class="progress-value" :style="{ 'width': progressPer + '%' }"></div>
          </div>
          <div class="days">
            <div class="day" v-for="day in timerange" :key="day.dayTime">
              <div v-if="timerange.length <= 8" class="hours">
                <div class="hour" v-for="hour in day.hours" :key="hour"><span>{{ hour }}</span></div>
              </div>
              <div v-else-if="timerange.length <= 18" class="hours">
                <div class="hour" v-for="hour in day.fourHours" :key="hour"><span>{{ hour }}</span></div>
              </div>
              <div v-else class="hours">
                <div class="hour" v-for="hour in day.twoHours" :key="hour"><span>{{ hour }}</span></div>
              </div>
              <div class="line"></div>
              <div class="title"><span>{{ day.dayTime }}</span><span v-if="timerange.length <= 8">({{ day.week }})</span></div>
              <div class="indicator"></div>
              <div class="circle"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </z-box>
</template>

<script>
import * as echarts from 'echarts'
import { nodes, links, symbols } from './graph2-data.js'
import { formatDate } from '@/utils/timeUtils.js'

export default {
  data () {
    const now = new Date()
    const pre = new Date(now.getTime() - 24 * 3600000 * 7)
    return {
      dataForm: {
        search: '4564321553634255434313',
        daterange: [pre, now]
      },
      chartOption: {},
      interval: null,
      timerange: [],
      weeks: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
      playStatus: '0', // 0 未开始、1开始、2、暂停、3、结束
      progressPer: 0,
      processInterval: null,
      nodesCount: 0,
      curNodes: [],
      ruleConfigVisible: false
    }
  },
  mounted() {
    nodes.forEach(node => {
      node.symbol = symbols[node.nodeName] || symbols['周某']
    });
    // this.getDataList()
    this.timerange = this.getTimerange()
  },
  beforeDestroy() {
    clearInterval(this.interval)
    clearInterval(this.processInterval)
  },
  methods: {
    getTimerange () {
      const timerange = []
      let pre = this.dataForm.daterange[0]
      const last = this.dataForm.daterange[1]
      while (pre <= last) {
        const time = {
          dayTime: formatDate(pre, 'yyyy-MM-dd'),
          week: this.weeks[pre.getDay()],
          hours: ['', '03', '06', '09', '12', '15', '18', '21'],
          fourHours: ['', '06', '12', '18'],
          twoHours: ['', '12']
        }
        timerange.push(time)
        pre = new Date(pre.getTime() + 24 * 3600000)
      }
      return timerange
    },
    getDataList() {
      if (!this.dataForm.search) {
        this.$message.warning('请输入IMSI')
        return
      }
      this.timerange = this.getTimerange()

      this.playStatus = '0'
      // this.playBtnClick()
      this.setOption(nodes, links)
    },
    playBtnClick() {
      if (this.playStatus === '0') {
        this.rePlay()
      } else if (this.playStatus === '1') {
        this.stop()
      } else if (this.playStatus === '2') {
        this.play()
      } else if (this.playStatus === '3') {
        this.rePlay()
      }
    },
    rePlay() {
      if (this.interval) {
        clearInterval(this.interval)
      }
      if (this.processInterval) {
        clearInterval(this.processInterval)
      }

      this.nodesCount = 0
      this.curNodes = []
      this.progressPer = 0

      this.curNodes.push(nodes[this.nodesCount])
      this.setOption(this.curNodes, links)
      this.nodesCount++;

      this.play()
    },
    play () {
      this.playStatus = '1'

      this.interval = setInterval(() => {
        if (this.nodesCount < nodes.length) {
          this.curNodes.push(nodes[this.nodesCount])
          this.nodesCount++;
          this.$refs.chart.chart.setOption({
            series: [
              { data: this.curNodes }
            ]
          })
        } else {
          clearInterval(this.interval)
          this.interval = null
          this.playStatus = '3'
        }
      }, 1000)

      this.processInterval = setInterval(() => {
        if ((this.progressPer + 100 / (nodes.length * 1000) * 100) < 100) {
          this.progressPer += 100 / (nodes.length * 1000) * 100
        } else {
          clearInterval(this.processInterval)
          this.progressPer = 100
          this.processInterval = null
        }
      }, 100);
    },
    stop () {
      this.playStatus = '2'

      if (this.interval) {
        clearInterval(this.interval)
      }
      if (this.processInterval) {
        clearInterval(this.processInterval)
      }
    },
    setOption(data, dataLinks) {
      this.chartOption = {
        backgroundColor: "#0B1321", //  background: #16283D;
        // legend: {
        //   data: ['应用', '模块', '节点']
        // },
        tooltip: {
          formatter: function(params) {
            return `姓名：${params.data.nodeName}<br>手机号：13534556677<br>IMSI：4564321553634255434313<br>密接时间：2021-10-28 10：10:00<br>密接地点：宝安区石岩街道`
          }
        },
        xAxis: {
          min: 0,
          max: 1000,
          show: false,
          type: 'value'
        },
        yAxis: {
          min: 0,
          max: 1000,
          show: false,
          type: 'value'
        },
        series: [
          {
            type: 'graph',
            coordinateSystem: 'cartesian2d',
            label: {
              show: true,
              position: 'bottom',
              color: '#8BC1FF',
              formatter: function(item) {
                return item.data.nodeName
              }
            },
            effect: {
                show: true,
                constantSpeed: 30,
                symbol: 'pin',
                symbolSize: 3,
                trailLength: 0,
            },
            edgeSymbol: ['circle', 'arrow'],
            edgeSymbolSize: [2, 6],
            lineStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: '#005DD1' },
                  { offset: 1, color: '#4D9CF5' }
                ], false),
                width: 2,
                opacity: 1,
                curveness: 0.1
              }
            },
            roam: true,
            links: dataLinks,
            data: data,
            categories: [{ name: '应用' }, { name: '模块' }, { name: '节点' }]
          }
        ]
      }
    },
    openRuleConfig() {
      this.ruleConfigVisible = true
      this.$nextTick(_ => {
        this.$refs.ruleConfig.init()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.player {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 70px;
  background: rgba(23, 50, 82, 0.95);
  display: flex;
  .play-btn {
    width: 80px;
    height: 100%;
    background: linear-gradient(90deg, #006AE1, #16B7FF);
    text-align: center;
    cursor: pointer;
    .play-btn-icon {
      display: inline-block;
      font-size: 20px;
      padding: 8px;
      border-radius: 100%;
      background: #fff;
      color: #006AE1;
      margin-top: 16px;
    }
  }
  .progress {
    width: calc(100% - 80px);
    height: 100%;
    padding: 14px 12px 0 20px;
    .progress-line {
      height: 6px;
      background: #0E6BD4;
      .progress-value {
        height: 100%;
        width: 30%;
        background: #4BDBFF;
      }
    }
    .days {
      display: flex;
      height: 50px;
      .day {
        flex-grow: 1;
        color: #fff;
        position: relative;
        .hours {
          display: flex;
          .hour {
            flex-grow: 1;
            color: #95B8FF;
            font-size: 12px;
            line-height: 16px;
            span {
              margin-left: -3px;
            }
          }
        }
        .line {
          height: 1px;
          background: #0A8BDA;
        }
        .title {
          margin-top: 8px;
          width: 100%;
          text-align: center;
        }
        .indicator {
          position: absolute;
          top: -15px;
          left: 0;
          height: 50px;
          border-left: 1px solid #4BDBFF;
        }
        .circle {
          position: absolute;
          top: -11px;
          left: -8px;
          width: 16px;
          height: 16px;
          box-sizing: border-box;
          border: 2px solid #0A8BDA;
          border-radius: 50%;
          background: #4BDBFF;
        }
      }
    }
  }
}
</style>